<template>
  <div class="home">

    <div>暂时在第二个myck2页</div>
    <div>{{xs}}你{{hk}}</div>
    <div ref="ad">是我</div>
    <div>是我{{hk}}</div>
    <div @click="gaib">改变是我样式</div>

    <input type="text" ref="mbd" placeholder="sdadsadas">
    <div @click="czbd">重置表单</div>
    <div>{{rejs.name}}</div>
    <div @click="uprejs">改变张三</div>
    <div>{{person.leftname}}:{{person.rightname}}={{person.fullname}}</div>
    <div>孩子数据：{{sonmsg}}{{sonname}}</div>
    <son :fatersj='fatersj' @sonclick='ReceiveData' @fater='getsonmsg'> <div class="slots" @click="slotclick">我和我的父辈</div> </son>
  </div>
    
</template>

<script>
// @ is an alias to /src
import son from '@/views/son.vue'
import { computed, reactive, watch } from '@vue/runtime-core'
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'

export default {
  name: 'newview',
  setup(props,context){
    console.log(context.attrs)
    const fatersj=reactive({
      fatername:'chiak',
      faterage:'29'
    })
    const ad=ref()
    ad.myfun=function(){

      console.log('新的特性')
        this.value.style.color='red'
      }
    const xs='风雨兼程'
    let hk=ref('一直在奔跑')
    const count= ref(2)
    const gaib=()=>{
      hk.value +='，一直再努力'
      console.log(hk)
      fatersj.fatername='mychiak'
      console.log(fatersj.fatername)
      ad.myfun()
      // ad.value.style.color='red'
      }
    const xg=function(){
      


    }
    const ReceiveData = (data) => {
                console.log(data)
            }
    const rejs=reactive({
      name:'张三',
      age:100,
      ktc:{
        zm:'我乃法外狂徒',
        ym:'我懂法律',
      }
    })

       const person = reactive({
            leftname:'left',
            rightname:'right'
        })
        person.fullname = computed(()=>{
            return person.leftname + person.rightname
        })//简写


    const  uprejs=()=>rejs.name+='是罗翔的顶头上司'
    // 其他的生命周期都写在这里
    onBeforeMount (() => {
      count.value++
      console.log('onBeforeMount', count.value)
    })
    onMounted (() => {
      count.value++
      console.log('onMounted', count.value)
    })
    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，会死循环的哦！
    onBeforeUpdate (() => {
      console.log('onBeforeUpdate', count.value)
    })
    onUpdated (() => {
      console.log('onUpdated', count.value)
    })
    onBeforeUnmount (() => {
      count.value++
      console.log('onBeforeUnmount', count.value)
    })
    onUnmounted (() => {
      count.value++
      console.log('onUnmounted', count.value)
    })
    
    return {
      xs,
      hk,
      xg,
      count,
      ad,
      gaib,
      rejs,
      uprejs,
      person,
      fatersj,
      ReceiveData,
    }
    
  },
  data(){
    return{
      mas:1111,
     show:false,
     sonmsg:'',
     sonname:'',
    }
  },
  mounted(){
    console.log('sdsa')

  },
  components: {
    son
  },
  computed:{
    getcount:function(){
      console.log(this.$store.state)
      return this.$store.state.count
    },
    ...mapGetters(["js"]),
  },
  methods:{
    czbd(){
      this.$refs.mbd.value=''
      console.log(this.$refs.mbd)
    },
    getsonmsg(msg,name){
      this.sonmsg=msg,
      this.sonname=name
    },
    slotclick(){
            console.log('我是插槽里面的点击事件111')
        }

    
  }
  
}
</script>
<style>
 .neiy{
   height: 50vh;
 }
 .slots{
  background: rgba(48, 47, 47, 0.062);
  font-weight: normal;
 }
</style> 